<template>
  <div class="tea-analysis-container">
    <el-carousel 
      :autoplay="true" 
      :interval="5000" 
      height="300px" 
      direction="vertical"
      indicator-position="none"
    >
      <el-carousel-item v-for="(content, index) in contents" :key="index">
        <el-card class="analysis-card">
          <div class="analysis-section">
            <h3 style="text-align: left;">{{ content.title }}</h3>
            <p class="analysis-text">{{ content.text }}</p>
          </div>
        </el-card>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'TeaHealthAnalysis',
  data() {
    return {
      contents: [
        {
          title: '体质分析',
          text: '以人体图为核心，标注六大茶类人体各系统的作用区域，为其他图表提供生理学基础。'
        },
        {
          title: '茶区分布',
          text: '不同产茶区的茶叶成分差异，对应体质图中特定区域的效果。地理环境影响茶叶特性，进而解释区域性饮茶健康特征的差异性。'
        },
        {
          title: '体质趋势',
          text: '通过体质占比图使用户直观了解自己的体质区间，为个性化饮茶建议提供数据支持。'
        },
        {
          title: '茶文化演变',
          text: '古代饮茶习惯与现代饮茶方式对比，揭示体质图中健康效应的文化根源。茶具、仪式等文化符号的变迁，反映饮茶从“药用”到“养生”的功能演变。'
        }
      ]
    }
  }
}
</script>

<style scoped>
.tea-analysis-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.section-title {
  text-align: center;
  margin-bottom: 24px;
  color: #32ccee;
  font-size: 20px;
}

.analysis-card {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1); */
}

.analysis-section {
  max-width: 800px;
  padding: 12px;
}

h3 {
  text-align: center;
  color: #32ccee;
  margin-bottom: 12px;
  font-size: 16px;
}

.analysis-text {
  text-align: justify;
  line-height: 1.6;
  color: #ffffff;
  font-size: 14px;
}

.el-carousel {
  background-color: transparent;
  border-radius: 4px;
}
</style>
